<template>
  <el-dialog title="详情" :close-on-click-modal="false" :visible.sync="visible">
    <div class="mod-config">
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        label-width="100px"
      >
        <el-form-item label="项目名称" prop="projectId">
          <!-- <el-input v-model="dataForm.projectId" placeholder="项目名称"></el-input> -->

          <el-select v-model="dataForm.projectId" placeholder="请选择" disabled>
            <el-option
              v-for="item in projectList"
              :key="item.projectId"
              :label="item.projectName"
              :value="item.projectId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始时间" prop="beginTime">
          <el-date-picker
            v-model="dataForm.beginTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            disabled
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="dataForm.endTime"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            disabled
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="任务名称" prop="taskName">
          <el-input
            v-model="dataForm.taskName"
            placeholder="任务名称"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item label="任务描述" prop="taskDescription">
          <el-input
            type="textarea"
            :rows="7"
            :autosize="{ minRows: 1, maxRows: 10 }"
            v-model="dataForm.taskDescription"
            placeholder="任务描述"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item label="资料清单" prop="dataListing">
          <el-input
            v-model="dataForm.dataListing"
            placeholder="资料清单"
            disabled
          ></el-input>
        </el-form-item>

        <el-form-item label="任务状态" prop="taskStatus">
          <el-select
            v-model="dataForm.taskStatus"
            placeholder="请选择"
            disabled
          >
            <el-option
              v-for="item in taskList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="分配人员" prop="allocateUserIds">
          <el-select
            v-model="dataForm.allocateUserIds"
            filterable
            multiple
            placeholder="请选择"
            disabled
          >
            <el-option
              v-for="item in userNameList"
              :key="item.userId"
              :label="item.username"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="负责人" prop="headUerId">
          <el-select
            v-model="dataForm.headUerId"
            filterable
            placeholder="请选择"
            disabled
          >
            <el-option
              v-for="item in userNameList"
              :key="item.userId"
              :label="item.username"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="审核人" prop="auditUserId">
          <el-select
            v-model="dataForm.auditUserId"
            filterable
            placeholder="请选择"
            disabled
          >
            <el-option
              v-for="item in userNameList"
              :key="item.userId"
              :label="item.username"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="文件上传" prop="fileUpload">
          <el-upload
            class="upload-demo"
            drag
            :action="actionUrl"
            :on-success="successHandle"
            :on-remove="handleRemove"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">文件不超过200mb</div>
          </el-upload>
        </el-form-item> -->

        <!-- <el-form-item label="创建人id" prop="createUserId">
      <el-input v-model="dataForm.createUserId" placeholder="创建人id"></el-input>
      </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        projectId: "",
        taskId: 0,
        projectId: "",
        beginTime: "",
        endTime: "",
        taskName: "",
        taskDescription: "",
        dataListing: "",
        createUserId: "",
        taskStatus: "",
        allocateUserIds: [],
        headUerId: "",
        auditUserId: "",
        filePath: "",
        fileName: "",
      },
      dataRule: {
        projectId: [
          { required: true, message: "项目id不能为空", trigger: "blur" },
        ],
        beginTime: [
          { required: true, message: "项目开始时间不能为空", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "项目结束时间不能为空", trigger: "blur" },
        ],
        taskName: [
          { required: true, message: "任务名称不能为空", trigger: "blur" },
        ],
        allocateUserIds: [
          { required: true, message: "分配人员不能为空", trigger: "blur" },
        ],
        headUerId: [
          { required: true, message: "负责人不能为空", trigger: "blur" },
        ],
        auditUserId: [
          { required: true, message: "审核人不能为空", trigger: "blur" },
        ],
        taskStatus: [
          { required: true, message: "任务状态不能为空", trigger: "blur" },
        ],
      },
      taskList: [
        {
          label: "进行中",
          value: "1",
        },
        {
          label: "已提交",
          value: "2",
        },
        {
          label: "延迟",
          value: "3",
        },
        {
          label: "已完成",
          value: "4",
        },
      ],
      allocateUserIds: "",
      projectList: [],
      userNameList: [],
      projectStatus: 0,
      info: {},
      actionUrl: "",
    };
  },
  methods: {
    init(id) {
      console.log(id);
      this.getProjectNameList();
      this.getUserNameList();

      //上传接口地址
      this.actionUrl = this.$http.adornUrl(
        `/sys/oss/upload?token=${this.$cookie.get("token")}`
      );
      // if (null != this.info) {
      this.dataForm.taskId = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.taskId) {
          this.$http({
            url: this.$http.adornUrl(
              `/business/task/info/${this.dataForm.taskId}`
            ),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.projectId = data.data.projectId;
              this.dataForm.beginTime = data.data.beginTime;
              this.dataForm.endTime = data.data.endTime;
              this.dataForm.taskName = data.data.taskName;
              this.dataForm.taskDescription = data.data.taskDescription;
              this.dataForm.dataListing = data.data.dataListing;
              this.dataForm.createUserId = data.data.createUserId;
              this.dataForm.taskStatus = data.data.taskStatus + "";

              //select选择器回显赋值
              this.dataForm.headUerId = data.data.headUerId;
              this.dataForm.auditUserId = data.data.auditUserId;
              var arrStringAllocateUserIds = data.data.allocateUserIds.split(
                ","
              );
              var arrIntAllocateUserIds = [];
              for (var arrInt in arrStringAllocateUserIds) {
                arrIntAllocateUserIds.push(
                  parseInt(arrStringAllocateUserIds[arrInt])
                );
              }
              this.dataForm.allocateUserIds = arrIntAllocateUserIds;
            }
          });
        }
      });
      // }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.allocateUserIds = this.dataForm.allocateUserIds;
          console.log(JSON.stringify(this.dataForm.allocateUserIds));
          let allocateUserIdsStr = "";
          for (var i = 0; i < this.allocateUserIds.length; i++) {
            if (i < this.allocateUserIds.length - 1) {
              allocateUserIdsStr += this.allocateUserIds[i] + ",";
            } else {
              allocateUserIdsStr += this.allocateUserIds[i];
            }
          }
          this.$http({
            url: this.$http.adornUrl(
              `business/task/${!this.dataForm.taskId ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              taskId: this.dataForm.taskId || undefined,
              projectId: this.dataForm.projectId,
              beginTime: this.dataForm.beginTime,
              endTime: this.dataForm.endTime,
              taskName: this.dataForm.taskName,
              taskDescription: this.dataForm.taskDescription,
              dataListing: this.dataForm.dataListing,
              createUserId: this.dataForm.createUserId,
              taskStatus: this.dataForm.taskStatus,
              allocateUserIds: allocateUserIdsStr,
              headUerId: this.dataForm.headUerId,
              auditUserId: this.dataForm.auditUserId,
              filePath: this.dataForm.filePath,
              fileName: this.dataForm.fileName,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
              // this.userNameList = [];
              // this.projectList = [];
              // this.dataForm = {};
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    getProjectNameList() {
      this.$http({
        url: this.$http.adornUrl("/business/project/list"),
        method: "get",
        params: this.$http.adornParams({
          projectStatus: this.projectStatus,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.projectList = data.page.list;
        } else {
          this.projectList = [];
        }
        this.dataListLoading = false;
      });
    },
    getUserNameList() {
      this.$http({
        url: this.$http.adornUrl("/sys/user/get-user-name-list"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.userNameList = data.data;
        } else {
          this.userNameList = [];
        }
        this.dataListLoading = false;
      });
    },
    // 上传成功
    successHandle(response, file, fileList) {
      console.log(JSON.stringify(file));
      this.fileList = fileList;
      console.log(JSON.stringify(fileList));
      this.dataForm.filePath = response.url;
      this.dataForm.fileName = file.name;
      this.successNum++;
      if (response && response.code === 0) {
        this.$message({
          message: "上传成功",
          type: "success",
          duration: 1500,
          onClose: () => {},
        });
        // if (this.num === this.successNum) {
        //   this.$confirm('操作成功, 是否继续操作?', '提示', {
        //     confirmButtonText: '确定',
        //     cancelButtonText: '取消',
        //     type: 'warning'
        //   }).catch(() => {
        //     this.visible = false
        //   })
        // }
      } else {
        this.$message.error(response.msg);
      }
    },
    //删除
    handleRemove(file, fileList) {
      console.log(JSON.stringify(file));
      console.log(JSON.stringify(fileList));

      this.$http({
        url: this.$http.adornUrl("sys/oss/delete-file"),
        method: "post",
        params: this.$http.adornParams({
          filePath: file.url,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1500,
            onClose: () => {},
          });
        }
      });
      // this.$axios.post('/api/delete',file.name ) //请求头要为表单
      //   .then(response=>{
      //     console.log(response.data);
      //   })
      //   .catch(function (error) {
      //     console.log(error);
      //   })
    },
  },
};
</script>
